 <template>
	<div class="controlPanel">
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1533371_cpt0c9dkv1.css" />
		<div class="songBackgrounder" :style="songBackg"></div>
		<div class="playerPro" v-if="wordSofSong">
			<!-- 歌曲封面 -->
			<div class="MusiCover">
				<img :src="consoleSong.al.picUrl" alt="">
				<img class="BlackAdhesive" src="../assets/disc-ip5.png" alt="">
			</div>
			<div class="conSong">
				<button @click="clicker"><i class="iconfont icon-fanhui"></i></button>
				<img src="../assets/needle-ip6.png" alt="">
			</div>

			<!-- 歌手、专辑 -->
			<div class="singerAlbum">
				<span v-for="(item,index) in wordSofSong.ar" :key="index">{{item.name}}</span>
				<span> - {{consoleSong.al.name}}</span>
				<div class="lyrics">
					<p v-for="(it,idx) in lrcStr" :key="idx">{{it}}</p>
				</div>
			</div>
		</div>
		<!-- icon 暂停 播放 上下一首 -->
		<Progress></Progress>
		<div class="console">
			<i @click="changeSong('pre')" class="iconfont icon-shangyishou1"></i>
			<i @click="wordState()" class="iconfont" :class="playerStare=='playing'?'icon-zanting':'icon-bofang'"></i>
			<i @click="changeSong('next')" class="iconfont icon-xiayishou1"></i>
		</div>
	</div>
</template>

<script>
	import api from '../js/api.js'
	import audio from '../js/audio.js'
	import Progress from '../components/Progress.vue'

	export default {
		data() {
			return {
				songBackg: null,
				lrcStr: [],
				lrcTime:[],
				lyricer: [],
				lyricObj: [],
			}
		},
		methods: {
			wordState() { //点击播放/暂停
				if (this.playerStare == "playing") {
					this.audio.pause();
					this.$store.commit("changePlayerState", 'pause');
				} else {
					this.audio.play();
					this.$store.commit("changePlayerState", 'playing');
				}
			},
			changeSong(type) { //点击上一首/下一首
				if (type == "pre") {
					this.$store.commit("preSong")
					window.console.log("上一首");
				} else {
					this.$store.commit("nextSong")
					window.console.log("下一首");
				}
				let playList = this.$store.state.playList;
				let playingIindex = this.$store.state.playingIindex;
				let songUrl = `https://music.163.com/song/media/outer/url?id=${playList[playingIindex]}.mp3`
				this.audio.playSong(songUrl);
				this.axios({ //获取音乐ID，渲染到播放器上
					
					url: api.songDetail + `?ids=${playList[playingIindex]}`,
				}).then(res => {
					this.$store.commit("setCurrnetSong", res.data.songs[0])
					this.songBackg = "background-image: url(" + this.consoleSong.al.picUrl + ");"
				});
				// 歌词处理
				this.axios({
					url: api.lyric + `?id=${playList[playingIindex]}`,
				}).then(res => {
					let lrc = res.data.lrc.lyric.split("\n");
					lrc.pop(1);
					let reg = /^(\[.*\])(.*)$/;
					// window.console.log(lrc);
					lrc.forEach((val) => {
						let valres = reg.exec(val);
						if (!valres) {
							return;
						}
						this.lrcTime.push(valres[1]);
						this.lrcStr.push(valres[2]);
					});
					window.console.log(lrc)
				});
			},
			clicker() {
				this.$router.go(-1)
			},
		},
		components: {
			Progress
		},
		computed: {
			consoleSong() {
				return this.$store.state.currnetSong
			},
			wordSofSong() {
				return this.$store.state.currnetSong
			},
			playerStare() {
				return this.$store.state.playerStare
			},

		}
	}
</script>

<style lang="scss" scoped>
	.controlPanel {
		.songBackgrounder {
			z-index: 100;
			height: 600px;
			background-repeat: no-repeat;
			background-position: 50% 0%;
			-webkit-filter: blur(7px);
			background-size: 160%;
		}

		.playerPro {
			width: 100%;
			z-index: 900;
			margin-top: -600px;
			box-sizing: content-box;

			button {
				width: 10%;
				height: 38px;
				top: 1%;
				left: 1%;
				position: fixed;
				background-color: rgba(0, 0, 0, 0);

				i {
					color: white;
					padding: 0;
					font-size: 20px;
				}
			}

			.MusiCover {
				width: 100%;
				height: 340px;
				margin: 0 auto;
				padding-top: 45px;
				-webkit-transform: rotate(360deg);
				animation: rotation 15s linear infinite;
				-moz-animation: rotation 15s linear infinite;
				-webkit-animation: rotation 15s linear infinite;
				-o-animation: rotation 15s linear infinite;

				img {
					width: 70%;
					z-index: 500;
					margin: 0 auto;
					border-radius: 50%;
				}

				.BlackAdhesive {
					top: 7%;
					right: 10%;
					width: 80%;
					position: fixed;

					img {
						width: 100%;
					}
				}

				// @-webkit-keyframes rotation {
				// 	from {
				// 		-webkit-transform: rotate(0deg);
				// 	}

				// 	to {
				// 		-webkit-transform: rotate(360deg);
				// 	}
				// }
			}


			.conSong {
				width: 100%;
				left: 16%;
				position: fixed;
				margin-top: -341px;

				img {
					width: 23%;
				}

			}

			.singerAlbum {
				z-index: 400;
				width: 100%;
				padding: 5px;
				position: relative;
				height: 270px;
				font-size: 21px;

				.lyrics {
					width: 100%;
					z-index: 400;
					height: 172px;
					overflow: hidden;
					overflow-y: auto;
					margin: 20px 0 0 0;
					padding: 0 30px 0 30px;
					p{
						font-size: 18px;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: nowrap;
					}
				}
			}

		}

		.console {
			float: left;
			width: 100%;
			z-index: 400;
			height: 60px;
			button: 0;
			position: fixed;
			padding-right: 120px;
			background-color: skyblue;

			i {
				font-size: 40px;
				padding-left: 60px;
				line-height: 60px;
			}
		}
	}
</style>
